<template>
  <div class="bottom">
    <h1 class="logoArea">
      <router-link class="logo" title="尚品汇" to="/home" >
        <img src="./images/logo.png" alt="" />
      </router-link>
    </h1>
    <div class="searchArea">
      <form action="###" class="searchForm">
        <input
          type="text"
          id="autocomplete"
          class="input-error input-xxlarge"
          v-model="keyword"
        />
        <button class="sui-btn btn-xlarge btn-danger" type="button" @click="searchMsg">
          搜索
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  beforeMount() {
    this.$bus.$on('removeKeyword',()=>{this.keyword = ''})
  },
  methods: {
    searchMsg() {
      let location = {
        name: 'search',
        params: {
          keyword: this.keyword || undefined
        }
      }
      if(this.$route.query.categoryName) {
        location.query = this.$route.query
      }
      if(this.$route.path !== '/home') {
        this.$router.replace(location)
      }else {
         this.$router.push(location)
      }
     
    }
  }
};
</script>

<style>
</style>